<template>
	<view class="body">
		<view class="user-set-info-list u-f-ac u-f-jsb">
			<view>头像</view>
			<view class="u-f-ac" @tap="changeimg">
				<image :src="userpic" mode="aspectFill" lazy-load=""></image>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="user-set-info-list u-f-ac u-f-jsb">
			<view>昵称</view>
			<view class="u-f-ac">
				<input type="text" v-model="username"/>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="user-set-info-list u-f-ac u-f-jsb">
			<view>性别</view>
			<view class="u-f-ac" @tap="changeOne('sex')">
				<view>{{ sex }}</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="user-set-info-list u-f-ac u-f-jsb">
			<view>生日</view>
			<picker mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="u-f-ac">
					<view>{{ birthday }}</view>
					<view class="icon iconfont icon-bianji1"></view>
				</view>
			</picker>
		</view>
		<view class="user-set-info-list u-f-ac u-f-jsb">
			<view>情感</view>
			<view class="u-f-ac" @tap="changeOne('qg')">
				<view>{{ qg }}</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="user-set-info-list u-f-ac u-f-jsb">
			<view>职业</view>
			<view class="u-f-ac" @tap="changeOne('zhiye')">
				<view>{{zhiye}}</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		<view class="user-set-info-list u-f-ac u-f-jsb">
			<view>家乡</view>
			<view class="u-f-ac" @tap="showMulLinkageThreePicker">
				<view>{{ pickerText }}</view>
				<view class="icon iconfont icon-bianji1"></view>
			</view>
		</view>
		
		<button 
		type="primary" 
		class="user-set-btn"
		:loading="loading"
		@tap="submit"
		>完成</button>
		
		<!-- 三级联动 -->
		<mpvue-city-picker 
		themeColor="#007AFF" 
		ref="mpvueCityPicker" 
		:pickerValueDefault="cityPickerValueDefault" 
		@onConfirm="onConfirm"
		></mpvue-city-picker>
	</view>
</template>

<script>
	const sex = ['不限','男','女'];
	const qg = ['保密','未婚','已婚','丧偶'];
	const zhiye = ['保密','前端开发','后端开发','测试开发'];
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		data() {
			return {
				userpic:'../../static/demo/userpic/14.jpg',
				username:'昵称',
				sex:'不限',
				qg:'未婚',
				zhiye:'前端开发',
				birthday: '1987-02-07',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '广东省-广州市-白云区',
				disabled: true,
				loading: false
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onBackPress() {
		  if (this.$refs.mpvueCityPicker.showPicker) {
			this.$refs.mpvueCityPicker.pickerCancel();
			return true;
		  }
		},
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		},
		methods: {
			submit(){
				
			},
			// 修改头像
			changeimg(){
				uni.chooseImage({
					count: 1,
					sizeType:['compressed'],
					success:(res) => {
						this.userpic = res.tempFilePaths;
					}
				})
			},
			changeOne(val){
				let arr = [];
				switch (val){
					case 'sex':
					    arr = sex;
						break;
					case 'qg':
					    arr = qg;
						break;
					case 'zhiye':
					    arr = zhiye;
						break;		
					default:
						break;
				}
				uni.showActionSheet({
					itemList: arr,
					success: res => {
						switch (val){
							case 'sex':
							    this.sex = arr[res.tapIndex];
								break;
							case 'qg':
							    this.qg = arr[res.tapIndex];
								break;
							case 'zhiye':
							    this.zhiye = arr[res.tapIndex];
								break;	
							default:
								break;
						}
					}
				});
			},
			// 修改生日
			bindDateChange: function(e) {
				this.birthday = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 三级联动
			showMulLinkageThreePicker(){
				this.$refs.mpvueCityPicker.show();
			},
			// 三级联动选中事件
			onConfirm(e) {
				this.pickerText = e.label;
			}
		},
		components:{
			mpvueCityPicker
		}
	}
</script>

<style scoped>
@import '../../common/form.css';
.user-set-info-list{
	padding: 20upx;
	border-bottom: 1upx solid #F4F4F4;
}
.user-set-info-list>view:first-child{
	font-size: 30upx;
	font-weight: bold;
	color: #9b9b9b;
}
.user-set-info-list>view:last-child>image{
	width: 80upx;
	height: 80upx;
	border-radius: 100%;	
}
.user-set-info-list>view:last-child>input{
	text-align: right;	
}
.user-set-info-list>view:last-child>view{
	margin-left: 20upx;
	color: #9b9b9b;
}
</style>
